<template>
  <div class="CareerPlan">
    <div class="CareerPlan_boxtop">
      <div class="CareerPlan_top">
        <div class="CareerPlan_top_box">
          <router-link to="/">
            <img
              class="CareerPlan_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CareerPlan_top_content">推荐列表</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>推荐列表</span>
        </div>
        <div class="bottombox">
          <div class="schoolmajor">
            <el-button :class="show==1?'school1':'school'" @click="change(1)">推荐院校</el-button>
            <el-button :class="show==1?'major':'major1'" @click="change(2)">推荐专业</el-button>
          </div>
          <div v-if="show==1">
            <div class="select">
              <el-select v-model="value" v-on:change="selectschoolbeach" placeholder="选择批次">
                <el-option
                  v-for="(item,index) in beachlist"
                  :key="index"
                  :label="item.batchName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-table :data="schoollist" stripe style="width: 100%" @row-click="goschoolDeatil">
                <el-table-column label="院校校徽" style="width: 20%">
                  <template slot-scope="scope">
                    <img :src="scope.row.logoUrl" width="40" height="40" class="head_pic" />
                  </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="院校名称" style="width: 20%"></el-table-column>
                <el-table-column prop="minScore" label="2019年录取最低分" style="width: 20%"></el-table-column>
                <el-table-column prop="minRanking" label="2019年录取最低排名" style="width: 20%"></el-table-column>
                <el-table-column prop="planNum" label="2019年招生人数" style="width: 20%"></el-table-column>
              </el-table>
            </div>
          </div>
          <div v-if="show==2">
            <div class="select">
              <el-select v-model="value1" v-on:change="selectmajorbeach" placeholder="选择批次">
                <el-option
                  v-for="(item,index) in beachlist"
                  :key="index"
                  :label="item.batchName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-table :data="majorlist" stripe style="width: 100%" @row-click="gomajorDeatil">
                <el-table-column prop="zhuanyeNameTem" label="专业名称" style="width: 20%">
                <template >
                </template>
                </el-table-column>
                <el-table-column prop="schoolNameTem" label="院校名称" style="width: 20%"></el-table-column>
                <el-table-column prop="minScore" label="2018年录取最低分" style="width: 20%"></el-table-column>
                <el-table-column prop="minRanking" label="2018年录取最低排名" style="width: 20%"></el-table-column>
                <el-table-column prop="planNum" label="2019年招生人数" style="width: 20%"></el-table-column>
              </el-table>
            </div>
          </div>
          <span class="lookmore" v-if="show==1" @click="page">查看更多</span>
          <span class="lookmore" v-if="show==2" @click="page1">查看更多</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CareerPlan",
  data() {
    return {
      show: this.$route.params.show,
      beachid: 0,
      beachid1: 0,
      firstId:'',
      beachlist: [],
      schoollist: [],
      majorlist:[],
      value: "",
      value1: "",
      pageNows: 0,
      pageNows1: 0,
      pageSize: 0,
      pageSize1: 0
    };
  },
  methods: {
    schoolbeach() {
      this.$ajax({
        method: "post",
        url: "/api/batch/getBacthByUserId",
        success: res => {
          if (res.data.code == 0) {
            this.beachlist = res.data.data.batchEntityList;
            // console.log(this.beachlist)

              this.firstId=this.beachlist[0].id
            
            // console.log(this.firstId)
          } else {
          }
        }
      });
    },
    schoolmorelist() {
      this.$ajax({
        method: "post",
        url: "/api/voluntary/intelligentFirst/schoolList",
        data: {
          batch: this.firstId,
          pageNow: 1,
          pageSize: 10
        },

        success: res => {
          if (res.data.code == 0) {
            this.schoollist = res.data.data.list;
            console.log(this.schoollist);
          } else {
          }
        }
      });
    },
    majormorelist(){
     
      this.$ajax({
        method: "post",
        url: "/api/major/guess/like",
        data: {
          batch: this.firstId,
          pageNow: 1,
          pageSize: 10
        },

        success: res => {
          if (res.data.code == 0) {
            this.majorlist = res.data.data.list;
            console.log(this.majorlist);
          } else {
          }
        }
      });
    },
    selectschoolbeach() {
      console.log(this.value);
      this.beachid = this.value;
      this.pageSize=0;
      this.$ajax({
        method: "post",
        url: "/api/voluntary/intelligentFirst/schoolList",
        data: {
          batch: this.beachid,
          pageNow: 1,
          pageSize: 10
        },

        success: res => {
          if (res.data.code == 0) {
            this.schoollist = res.data.data.list;
            console.log(this.schoollist);
          } else {
          }
        }
      });
    },
     selectmajorbeach() {
      this.pageSize1=0;
      this.beachid1 = this.value1;
      console.log(this.beachid1);
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/major/guess/like",
        data: {
          batch: this.beachid1,
          pageNow: 1,
          pageSize: 10
        },

        success: res => {
          if (res.data.code == 0) {
            this.majorlist = res.data.data.list;
            console.log(this.majorlist);
          } else {
          }
        }
      });
    },
    page() {
      this.pageSize += 5;
      this.$ajax({
        method: "post",
        url: "/api/voluntary/intelligentFirst/schoolList",
        data: {
          batch: this.beachid,
          pageNow: 1,
          pageSize: 10 + this.pageSize
        },

        success: res => {
          if (res.data.code == 0) {
            this.schoollist = res.data.data.list;
            console.log(this.schoollist);
          } else {
          }
        }
      });
    },
    page1() {
      
      this.pageSize1 = this.pageSize1+5;
      this.$ajax({
        method: "post",
        url: "/api/major/guess/like",
        data: {
          batch: this.beachid1,
          pageNow: 1,
          pageSize: 10 + this.pageSize1
        },

        success: res => {
          if (res.data.code == 0) {
            this.majorlist = res.data.data.list;
            console.log(this.majorlist);
          } else {
          }
        }
      });
    },
    change(e){
        this.show=e;
    },
    goschoolDeatil(row){
        this.$router.push({ name: '/SchoolDeatil', params: { userId: row.schoolId }})
    },
    gomajorDeatil(row){
        // console.log(row.majorAllId)
        this.$router.push({ path: '/MajorDeatil', query: { majorId: row.majorAllId }})
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.schoolmorelist();
      this.majormorelist();
      this.schoolbeach();
    });
  }
};
</script>
<style lang="scss" scoped>
.CareerPlan {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.CareerPlan_boxtop {
  width: 1200px;
  margin: 0 auto;
  height: 68.6px;
}
.CareerPlan_top {
  height: 68.6px;
}
.CareerPlan_top_box {
  width: 170.6px;
  height: 68.6px;
}
.CareerPlan_top_logo {
  width: 50px;
  padding-top: 12.5px;
  margin-right: 24px;
}
.CareerPlan_top_content {
  display: inline;
  font-size: 22px;
  color: #515151;
  float: right;
  line-height: 68.6px;
}
.CareerPlan_bottom {
  width: 100%;
  background-color: #f6f6f6;
}
.CareerPlan_boxbottom {
  width: 1200px;
  margin: 0 auto;
}
.CareerPlan_bottom_option {
  padding-top: 27px;
  padding-bottom: 60px;
}
.bottombox {
  
  background-color: #f6f6f6;
  width: 100%;
  .schoolmajor {
    margin-bottom: 40px;
    .school {
      width: 200px;
      height: 50px;
      background-color: #ffffff;
      text-align: center;
      border-radius: 5px;

      float: left;
      cursor: pointer;
    }
    .school1 {
      width: 200px;
      height: 50px;
      background-color: skyblue;
      text-align: center;
      border-radius: 5px;

      float: left;
      cursor: pointer;
    }
    .major {
      margin-left: 100px;
      background-color: #ffffff;

      width: 200px;
      height: 50px;
      border-radius: 5px;
    }
    .major1 {
      margin-left: 100px;
      background-color: skyblue;

      width: 200px;
      height: 50px;
      border-radius: 5px;
    }
  }
  .select {
    margin-bottom: 30px;
    width: 200px;
  }
  
  .lookmore {
    display: inline-block;
    margin-top: 36px;
    margin-bottom: 118px;
    margin-left: 550px;
    font-size: 17px;
    color: #959595;
    cursor: pointer;
  }
}
span {
  color: #757575;
  font-size: 15px;
}
.router-link-active {
  text-decoration: none;
}
</style>